<template>
	<!-- 导航条 -->
	<div class="app-container">
		<h2 style="text-align: center;">发布新课程</h2>
		<!-- 添加课程表单 -->
		<el-form label-width="120px" :model="courseInfo" ref="courseInfoForm" :rules="rules">
			<el-form-item label="课程标题" prop="title">
				<el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写" />
			</el-form-item>
			<el-form-item label="总课时">
				<el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数" />
			</el-form-item>
			<!-- 课程简介-->
			<el-form-item label="课程简介" prop="description" >
				 <el-input type="textarea" v-model="courseInfo.description" style="width: 300px;"></el-input>
			</el-form-item>
			<!-- 课程封面-->
			<el-form-item label="课程封面" prop="ccover">
				<el-upload class="avatar-uploader" action="http://127.0.0.1:8082/course/uploadImg" :show-file-list="false" :on-success="handleAvatarSuccess"  :before-upload="beforeAvatarUpload">
					<img v-if="courseInfo.imgUrl" :src="courseInfo.imgUrl" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<div>
				<el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
				<el-button v-if="showCreateBtn == true" type="primary" @click="saveAndUpdate">保存并继续创建目录</el-button>
				<el-button v-if="showEditBtn == true" type="primary" @click="saveAndUpdate">继续编辑目录</el-button>
			</div>
		</el-form>
	</div>
</template>
<script>
	import axios from "@/utils/axiosutils.js"
	
	export default {
		//声明组件
		components: {
		},
		data() {
			return {
				showEditBtn: false,
				showCreateBtn: true,
				saveBtnDisabled: false,
				courseInfo: {
					id: '',
					title: '',
					description: '',
					lessonNum: 0,
					imgUrl: ""
				},
				courseId: '',
				rules:{
					title:[{ required: true, message: '请输入课程名称' }],
					description:[{ required: true, message: '请输入课程描述'  }],
				}
			}
		},
		created() {
			this.init()
		},

		watch: {
			$route(to, from) { //路由变化方式，路由发生变化，方法就执行
				console.log('watch $route')
				this.init()
			}
		},
		methods: {
			//初始化
			init() {
				//获取路径中id值
				if (this.$route.query.id) {
					this.showEditBtn = true;
					this.showCreateBtn = false;
					this.courseId = this.$route.query.id
					//根据id调用课程查询方法
					this.getInfo(this.courseId)
				}
			},
			//根据课程id查询信息
			getInfo(id) {
				axios.post("course/getById", resp => {
					this.courseInfo = resp.obj;
				}, {
					id: id,
				})
			},
			//上传封面之前调用的方法
			beforeAvatarUpload(file) {
				this.loading=true;
				// const isJPG = file.type === 'image/jpeg'
				// const isPNG = file.type === 'image/png'
				// const isLt2M = file.size / 1024 / 1024 < 2
				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!')
				// }if (!isPNG) {
				// 	this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!')
				// }
				// if (!isLt2M) {
				// 	this.$message.error('上传头像图片大小不能超过 2MB!')
				// }
				// return isJPG && isLt2M
			},
			//上传封面成功调研方法
			handleAvatarSuccess(res, file) {
				
				if (res.code == 200) {
					this.loading=false;
					this.courseInfo.imgUrl = "http://127.0.0.1:8082/img/"+ res.obj;
					this.$message({
						type: 'success',
						message: '更换封面成功!'
					});
				}
			},
			saveOrUpdate() {
				// axios.post("course/save", resp => {}, this.courseInfo)
				this.$refs.courseInfoForm.validate(valid => {
					if (valid) {
						let json = JSON.stringify(this.courseInfo)
						axios.post(
							'course/save',
							resp => {
								this.$message({
									type: 'success',
									message: '保存成功!'
								});
								this.$router.push('/courseList');
							},{
								json:json
							}
						);
					} else {
						this.$message.error('请填写必填项');
					}
				});
			},
			saveAndUpdate() {
				this.$refs.courseInfoForm.validate(valid => {
					if (valid) {
						let json = JSON.stringify(this.courseInfo);
						axios.post(
							'course/save',
							resp => {
								this.$message({
									type: 'success',
									message: '保存成功!'
								});
								this.$router.push({ path: '/course/courseContent', query: { courseId: resp.obj } });
							},
							{
								json: json
							}
						);
						
					} else {
						this.$message.error('请填写必填项之后才可以跳转');
					}
				});}
		}
	}
</script>
<style scoped>

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
>>> .el-upload {
	border: 1px dashed #d9d9d9;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.el-form-item >>> .el-upload {
	/*修改默认样式--穿透,或使用‘>>>’*/
	display: inline-block;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
